<template>
  <div>
    <van-nav-bar
        title="美食"
        left-text="返回"
        left-arrow
        @click-left="tzback()"
    />
  </div>
  <!--  查询条件-->
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="综合">
        <!--        <van-row gutter="10">-->
        <!--          <van-col span="12">-->
        <van-card v-for="f in foods"
                  :num="f.repertory"
                  :tag="f.tags"
                  :price="f.price"
                  :desc="f.detail"
                  :title="f.title"
                  :thumb="f.imgurl"
                  @click="fdetail(f.id,1)"
        />
        <!--          </van-col>-->

        <!--        </van-row>-->
      </van-tab>
      <van-tab title="销量">
        <van-card v-for="f in foodsbybuy"
                  :num="f.repertory"
                  :tag="f.tags"
                  :price="f.price"
                  :desc="f.detail"
                  :title="f.title"
                  :thumb="f.imgurl"
                  @click="fdetail(f.id,1)"
        />
      </van-tab>
      <van-tab title="价格">
        <!--        <van-row gutter="10" justify="center">-->
        <!--          <van-col span="20" v-for="f in foodsbyprice">-->
        <van-card v-for="f in foodsbyprice"
                  :num="f.repertory"
                  :tag="f.tags"
                  :price="f.price"
                  :desc="f.detail"
                  :title="f.title"
                  :thumb="f.imgurl"
                  @click="fdetail(f.id,1)"
        />
        <!--          </van-col>-->
        <!--        </van-row>-->
      </van-tab>
    </van-tabs>
  </div>

  <div>

  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  name: "Food",
  data(){
    return{
      foods:[],
      foodsbyprice:[],
      foodsbybuy:[],
    }
  },
  setup() {
    const active = ref(0);
    return {
      active,
    };
  },
  mounted() {
    //页面初始化 执行
    this.axios.get("/api/foods/querybybuy.do").then(res=>{
      if(res.data.code==200){
        this.foodsbybuy=res.data.data;
      }
    });
    this.axios.get("/api/foods/selectprice.do").then(res=>{
      if(res.data.code==200){
        this.foodsbyprice=res.data.data;
      }
    })
    this.axios.get("/api/foods/list.do").then(res=>{
      if(res.data.code==200){
        this.foods=res.data.data;
      }
    })
  },
  methods:{
    fdetail(id){
      //跳转页面 传递参数 编程式路由 携带参数
      this.$router.push({path:"/foodsdetail",query:{fid:id}});
    },
    tzback(){
      history.back();
    },
  }

}
</script>

<style scoped>

</style>